<template>
  <div class="container">
    <div class="helpcenter" v-if="data.user">
      <van-cell
        :title="sayHi"
        label="优越客服竭诚为您服务，用心聆听您的声音"
        size="large"
      />
    </div>
    <div
      class="group"
      v-if="data.heateds.length>0"
    >
      <van-cell-group title="猜你想问">
        <van-cell
          :title="item.title"
          v-for="(item, key) in data.heateds"
          v-bind:key="key"
          @click="pushNativelink(item.link)"
        />
      </van-cell-group>
    </div>

    <div
      class="group"
      v-if="data.categorys.length>0"
    >
      <van-cell-group
        title="帮助中心"
        class="text-center"
      >
        <van-row
          type="flex"
          justify="center"
          align="center"
          class="van-hairline--top"
          v-for="(item, key) in data.categorys"
          v-bind:key="key"
        >
          <van-col
            span="6"
            class="help-category"
            @click.native="pushNativelink(item.link)"
          >
            <van-icon
              :name="item.icon"
              :color="item.color"
            />
            <div>{{item.name}}</div>
          </van-col>
          <van-col span="18">
            <van-row
              justify="center"
              align="center"
              class="help-item"
            >
              <van-col
                span="12"
                :class="k>1?'van-hairline--left':'van-hairline--surround'"
                v-for="(q, k) in item.recommends"
                v-bind:key="k"
                @click.native="pushNativelink(q.link)"
              >{{q.title}}</van-col>
            </van-row>
          </van-col>
        </van-row>
      </van-cell-group>
    </div>

    <div
      class="space-action"
      v-if="data.feedback"
    >
      <van-button
        type="warning"
        block
        @click="pushNativelink(data.feedback)"
      >{{data.feedback.title}}</van-button>
    </div>

  </div>
</template>
<script>
import { Row, Col, Cell, Icon, CellGroup, List, Button } from 'vant'

export default {
  components: {
    [Row.name]: Row,
    [Col.name]: Col,
    [Cell.name]: Cell,
    [Icon.name]: Icon,
    [CellGroup.name]: CellGroup,
    [List.name]: List,
    [Button.name]: Button
  },
  data () {
    return {
      data: {
        heateds: [],
        categorys: [],
        user: null,
        feedback: null
      },
      finished: false,
      count: 0,
      show: true,
      iserror: false,
      visible: false
    }
  },
  computed: {
    url () {
      if (this.tpl) {
        return this.tpl
      }
      return this.data.format
    },
    sayHi () {
      if (this.data.user && this.data.user.username) {
        return 'Hi,' + this.data.user.username
      }
      return '您好，有什么可以帮助您？'
    }
  },
  created () {
    this.onLoad()
  },
  watch: {
    statusBarHeight: {
      handler (curVal, oldVal) {
        console.log(curVal, oldVal)
        this.fixedStatusBar()
      }
    }
  },
  methods: {
    onLoad () {
      this.axios
        .get('/app/service', {
          headers: { FastMode: true }
        })
        .then(response => {
          this.data = response.data
        })
        .catch(function (error) {
          console.log(error)
        })
    }
  }
}
</script>

<!-- Add "scoped" attribute to limit CSS to this component only -->
<style lang="less" scoped>
.helpcenter {
  .van-cell--large {
    padding: 20px 15px;
    background: transparent;
    .van-cell__title {
      color: #fff;
    }
    .van-cell__label {
      font-size: 60%;
      font-weight: 300;
      color: rgba(255, 255, 255, 0.8);
    }
  }
}
.group {
  background: #fff;
  margin-top: 15px;
  .van-cell-group {
    &__title {
      font-weight: 600;
      color: #333;
      padding: 15px 15px 10px;
    }
  }
}

.help-category {
  .van-icon {
    font-size: 24px;
  }
  .van-icon + div {
    margin-top: 5px;
  }
}
.help-item {
  .van-col {
    padding: 10px;
    font-size: 12px;
    color: #666;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
  }
}
</style>
